<template>
    <div class="home-topic">
      <div class="topic-top">
          题目
          <div class="top-right">{{index}}/10</div>
        </div>
        <div class="topic-title">
          <div class="title">{{item.title}}</div>
          <div class="desc">属于以下那种分类？</div>
        </div>
        <div class="topic-choose">
          <div class="choose-title">请选择:</div>
          <div class="choose-button" v-for = "(item, index) of choose" :key = "item.id">
            <div class="_button" @click="submitChoose(item.desc, index)">{{item.desc}}</div>
          </div>
        </div>
        <div class="topic-bottom">
          <el-button @click="preTitle">上一题</el-button>
          <el-button class="bottom-right" @click="nextTitle" v-show="flag">下一题</el-button>
          <el-button class="bottom-right" @click="submitAnswer" v-show="!flag">提 交</el-button>
        </div>
        <div class="home-tips" v-show="showT">
          <div class="tips-desc">此次答题答对7题，共获得7个积分</div>
          <div class="tips-choose">
            <el-button class="answer-left" @click="showT=false">确定</el-button>
            <!-- <el-button class="choose-right" @click="tip=false">取消</el-button> -->
          </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      index: 1,
      titles: [],
      choose: [{
        id: '01',
        desc: '可回收垃圾'
      }, {
        id: '02',
        desc: '厨余垃圾'
      }, {
        id: '03',
        desc: '有害垃圾'
      }, {
        id: '04',
        desc: '其他垃圾'
      }]
    }
  },
  methods: {
    // 上一题
    preTitle () {
      this.item = this.titles[this.index - 2]
      // 判断该题目是否为第一题
      if (this.index === 1) {
        this.$message({
          message: '已经没有了上一题，请点击下一题',
          type: 'warning'
        })
      } else {
        this.index = this.index - 1
        // 获取选项，先将选项颜色都置为白色，然后在判断该题选了哪一个选项
        let div = document.getElementsByClassName('_button')
        for (let i = 0; i < 4; i++) {
          div[i].style.background = 'white'
        }
        // 判断上一题的选项
        if (this.item.choose === '可回收垃圾') {
          div[0].style.background = 'skyblue'
        } else if (this.item.choose === '厨余垃圾') {
          div[1].style.background = 'skyblue'
        } else if (this.item.choose === '有害垃圾') {
          div[2].style.background = 'skyblue'
        } else if (this.item.choose === '其他垃圾') {
          div[3].style.background = 'skyblue'
        } else {
          for (let i = 0; i < 4; i++) {
            div[i].style.background = 'white'
          }
        }
      }
    },
    // 下一题
    nextTitle () {
      this.item = this.titles[this.index]
      // console.log(this.item.title)
      this.index = this.index + 1
      console.log(this.index, 'index')
      if (this.index === 10) {
        this.flag = false
      }
      let div = document.getElementsByClassName('_button')
      for (let i = 0; i < 4; i++) {
        div[i].style.background = 'white'
      }
      if (this.item.choose === '可回收垃圾') {
        div[0].style.background = 'skyblue'
      } else if (this.item.choose === '厨余垃圾') {
        div[1].style.background = 'skyblue'
      } else if (this.item.choose === '有害垃圾') {
        div[2].style.background = 'skyblue'
      } else if (this.item.choose === '其他垃圾') {
        div[3].style.background = 'skyblue'
      } else {
        for (let i = 0; i < 4; i++) {
          div[i].style.background = 'white'
        }
      }
    },
    // 选择题目答案
    submitChoose (e, count) {
      console.log(e, count, 'click', this.item)
      this.item.choose = e
      console.log(this.item)
      let div = document.getElementsByClassName('_button')
      // console.log(div[index].style.background, 'style')
      if (div[count].style.background === 'skyblue none repeat scroll 0% 0%') {
        div[count].style.background = 'white'
      } else {
        for (let i = 0; i < div.length; i++) {
          div[i].style.background = 'white'
        }
        div[count].style.background = 'skyblue'
        // console.log(div.length, 'length')
      }
    },
    // 提交10道题目
    submitAnswer () {
      for (let i = 0; i < 10; i++) {
        this.answer.push(this.titles[i].choose)
      }
      console.log(this.answer)
      this.flag = true
      this.showT = true
      this.index = 1
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/global";
  .home-topic{
    width: 96%;
    margin: 10px 2%;
    padding: 10px 0;
    background: white;
    border-radius: 10px;
    .topic-top{
      padding: 10px 15px;
      .top-right{
        float: right;
        top: 0;
        right: 0;
      }
    }
    .topic-title{
      height: 50px;
      text-align: center;
      .title{
        font-size: 20px;
        padding-bottom: 10px;
      }
    }
    .topic-choose{
      padding: 5px 15px;
      .choose-button{
        margin: 5px auto;
        ._button{
          width:100%;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border: 1px solid skyblue;
          border-radius: 8px;
          background: white;
        }
      }
    }
    .topic-bottom{
      position: relative;
      padding: 5px 15px;
      .bottom-right{
        position: absolute;
        right: 15px
      }
    }
  }
</style>
